feat(gfi): migrate plugin by oeninghe-dataport · Pull Request #447 · Dataport/polar

oeninghe-dataport · 2026-01-08T15:46:24Z

Summary

Migrate the GFI plugin.

Instructions for local reproduction and review

Open snowbox.
Click on a marker.
See the result.

Additional hints

The utils requestGfi* were migrated as-is and do not need to be reviewed therefore.

Relevant tickets, issues, et cetera

Closes #368

github-actions · 2026-01-23T09:49:02Z

PR Preview Action v1.8.1
🚀 View preview at https://Dataport.github.io/polar/pr-preview/pr-447/
Built to branch `gh-pages` at 2026-07-28 13:11 UTC. Preview will be ready when the GitHub Pages deployment is complete.

The usually helpful variables (map, stores, etc.) are auto-exported as global variables for use with the browser's devtools in snowbox.

# Conflicts: # examples/snowbox/services.js

dopenguin

Please add an example to iceberg; this maybe should include an example with a layer where the feature list is not being used
There should be no horizontal scrollbar if no features are available
Some things are missing / quite different with the featureList; some parts are connections with the markers feature. This includes:
- When hovering an element in the feature list, the feature is highlighted in the map with the hover style
- When hovering an element in the map, the feature is highlighted in the feature list (previously green); when hovering a clustered feature, all features that are part of the cluster are highlighted
- If I select a feature in the map, it is selected in the feature list
- If I select a feature in the feature list, the corresponding marker gets the selected style; currently, a yellow dot is being displayed
- If I select a feature in the feature list, the map should be centered on that feature
- If a feature is not selectable because of the configured isSelectable function, it is not being shown in the feature list

The list may not be complete, so please take a look at Meldemichel regarding the various things mentioned above.

I'll be taking a look at the components and stores once you've tackled these things.

🏓 @oeninghe-dataport

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

Using shallowRef only does not reach this effect here, especially for the nested OpenLayers objects.

oeninghe-dataport · 2026-07-28T09:23:56Z

🏓 @dopenguin

Every point was (hopefully) addressed again, including the aspects discussed in person.

Co-Authored-By: GPT-5.6 Sol

dopenguin · 2026-08-03T17:38:12Z

The amount of displayed features seems to be off by a lot compared to https://static.hamburg.de/kartenclient/prod/.
This would also be interesting to test in https://github.com/Dataport/polar/pull/447/changes#r3364630910

Current implementation:

Meldemichel (prod):

dopenguin · 2026-08-03T17:44:46Z

@@ -0,0 +1,168 @@
+<template>
+	<p class="kern-subline kern-subline--small">


This element should not have any padding if the nav is not rendered.

dopenguin · 2026-08-03T17:45:47Z

 	}
 }
+
+.ol-overlay-container.ol-selectable {


Please add a comment for which situation this is required.

dopenguin · 2026-08-03T17:51:11Z

 export * from './utils/export/plugin'
 export * from './utils/export/store'

+export { isVisible } from '@/lib/invisibleStyle'


Why should a lib-function be re-exported from the core?

It is used at https://github.com/Dataport/polar/blob/vue3/migrate-plugin-gfi/examples/snowbox/index.js#L454

As there is a usage in our example client, there is surely also a valid usage for real-world clients.

dopenguin · 2026-08-03T17:57:07Z

+			{{
+				gfiStore.title
+			}}


Why does the linter autoformat that to three lines?

dopenguin · 2026-08-03T18:00:50Z

+
+	.action-bar-group {
+		display: flex;
+		gap: var(--kern-metric-space-default);


Suggested change

gap: var(--kern-metric-space-default);

gap: var(--kern-metric-space-small);

Inline with the +- and --buttons in routing.

dopenguin · 2026-08-03T18:05:13Z

+		value: 'Wert',
+	},
+	property: {
+		export: 'Export als PDF',


This does not really seem to fit as exportProperty does not declare what kind of export is present.

dopenguin · 2026-08-03T18:07:20Z

+			</KernButton>
+			<KernButton
+				class="kern-btn--tertiary"
+				icon="kern-icon--close"


Previously, the icon and the ariaLabel depended whether featureList is used or not. This should stay like this.

dopenguin · 2026-08-03T18:08:34Z

+				class="kern-btn--tertiary"
+				icon="kern-icon--close"
+				:label-sr-only="true"
+				@click="gfiStore.selectedFeatures = markRaw({})"


markRaw is unnecessary for shallowRefs. This can be removed here and in GfiFeatureList.ce.vue and list.ts

dopenguin · 2026-08-03T18:14:18Z

Please also remove the now "unused" imports

dopenguin · 2026-08-04T12:36:08Z

-	const cluster = (layer.getSource() as VectorSource)
-		.getFeatures()
-		.find((candidate: Feature) => candidate.get('features').includes(feature))
+	const source = layer.getSource() as VectorSource
+	const cachedCluster = clusterByFeature.get(feature)
+	const cluster =
+		cachedCluster &&
+		source.hasFeature(cachedCluster) &&
+		cachedCluster.get('features').includes(feature)
+			? cachedCluster
+			: source
+					.getFeatures()
+					.find((candidate: Feature) =>
+						candidate.get('features').includes(feature)
+					)

 	if (!(cluster instanceof Feature)) {
 		throw new Error(
 			'@polar/lib-get-cluster: No cluster could be found for the given feature.'
 		)
 	}
+	clusterByFeature.set(feature, cluster)
 	// The given feature should be the last in the array, as it the one "above" all thus added last
-	cluster.set('features', [
-		...cluster.get('features').filter((f: Feature) => f !== feature),
-		feature,
-	])
+	const clusterFeatures = cluster.get('features') as Feature[]
+	if (clusterFeatures.at(-1) !== feature) {
+		cluster.set(
+			'features',
+			[...clusterFeatures.filter((f) => f !== feature), feature],
+			true
+		)
+	}


This has been working properly since January 2024 and I don't see the new solution to be easier to read.
Why is this change necessary?

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

dopenguin · 2026-08-04T12:57:22Z

Here's a patch that
a) changes kern-heading-medium to kern-title like https://www.kern-ux.de/komponenten/card intends
b) restructures the CSS

dopenguin · 2026-08-04T12:57:56Z

+		background-color: #dff0dd;
+	}
+
+	&:hover {
+		border-radius: var(--kern-metric-border-radius-default);
+		border-color: #3fa535;


Both have to use the oklch equivalent

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

oeninghe-dataport added this to the POLAR@3 milestone Jan 8, 2026

oeninghe-dataport self-assigned this Jan 8, 2026

oeninghe-dataport added the refactor Refactoring of previous code label Jan 8, 2026

oeninghe-dataport linked an issue Jan 12, 2026 that may be closed by this pull request

Migration of GFI plugin to POLAR@3 #368

Open

oeninghe-dataport force-pushed the vue3/migrate-plugin-gfi branch 3 times, most recently from 58e73f6 to f941649 Compare January 16, 2026 13:12

oeninghe-dataport added 3 commits January 23, 2026 10:46

refactor(reverseGeocoder): introduce shared lib getRefStore

2f99431

feat(core): export center and extent as instable API

74e98dd

feat(core): add shared pagination component

0da4c0a

oeninghe-dataport force-pushed the vue3/migrate-plugin-gfi branch from bb7336c to 6a3129e Compare January 23, 2026 09:46

oeninghe-dataport added 5 commits February 16, 2026 14:51

test(snowbox): allow jumping to Hamburg via button

15972bf

test(snowbox): debug assistant for browser devtools

d449c8d

The usually helpful variables (map, stores, etc.) are auto-exported as global variables for use with the browser's devtools in snowbox.

feat(gfi): migrate plugin

1234994

refactor(core): make renderType a global plugin option

8757e3b

feat(gfi): improve support for different rendering options

425cfdb

oeninghe-dataport force-pushed the vue3/migrate-plugin-gfi branch from acbf752 to 425cfdb Compare February 17, 2026 15:55

Merge branch 'next' into vue3/migrate-plugin-gfi

bf71346

oeninghe-dataport marked this pull request as ready for review February 17, 2026 16:02

oeninghe-dataport requested review from dopenguin and warm-coolguy as code owners February 17, 2026 16:02

dopenguin removed the request for review from warm-coolguy February 19, 2026 09:46

Merge branch 'next' into vue3/migrate-plugin-gfi

70ff48d

# Conflicts: # examples/snowbox/services.js

dopenguin requested changes Feb 23, 2026

View reviewed changes

dopenguin and others added 5 commits February 23, 2026 19:56

Merge branch 'next' into vue3/migrate-plugin-gfi

11fe191

fix(gfi): remove legacy manual plugin prefix for console

978d718

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

docs: fix shared locales hint

6d60086

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

docs: fix shared locales hint

6182677

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

docs: fix shared locales hint

439ae45

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

oeninghe-dataport added 8 commits July 21, 2026 10:01

perf: do not deep-watch OL objects in useOlVectorSources

87c843a

perf(gfi): lazy hover calculation

43f7344

docs(core): add hint to evaluate maskedInteractions

7555797

refactor(gfi): extract setSelectedFeature in featureList

178001a

perf(gfi): use markRaw with OpenLayers objects

debe186

Using shallowRef only does not reach this effect here, especially for the nested OpenLayers objects.

test(snowbox): use larger clusterDistance to match MML

97254a4

Merge branch 'next' into vue3/migrate-plugin-gfi

07b7bad

refactor: rename idx to index

6c762b2

dopenguin removed request for czirkelbach and raschju July 28, 2026 11:37

fix(gfi): filter selectable features with zoom changes

82d2196

Co-Authored-By: GPT-5.6 Sol

dopenguin reviewed Aug 3, 2026

View reviewed changes

Comment thread examples/snowbox/index.html Outdated

dopenguin reviewed Aug 3, 2026

View reviewed changes

Comment thread src/core/stores/index.ts Outdated

dopenguin reviewed Aug 3, 2026

View reviewed changes

Comment thread vue2/packages/types/custom/core.ts

dopenguin Aug 3, 2026

Copy link
Copy Markdown

Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please also remove the now "unused" imports

dopenguin reviewed Aug 4, 2026

View reviewed changes

oeninghe-dataport and others added 2 commits August 4, 2026 14:53

docs(core): reword docs for selectedFeature

d38a39f

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

docs(core): explain the usage of .ol-overlay-container.ol-selectable

857e712

dopenguin reviewed Aug 4, 2026

View reviewed changes

test(snowbox): re-add swallowed ending newline

7e1352d

Co-authored-by: Pascal Röhling <73653210+dopenguin@users.noreply.github.com>

		@@ -0,0 +1,168 @@
		<template>
		<p class="kern-subline kern-subline--small">

	gap: var(--kern-metric-space-default);
	gap: var(--kern-metric-space-small);

Uh oh!

Conversation

oeninghe-dataport commented Jan 8, 2026

Summary

Instructions for local reproduction and review

Additional hints

Relevant tickets, issues, et cetera

Uh oh!

github-actions Bot commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-07-28 13:11 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

dopenguin left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oeninghe-dataport commented Jul 28, 2026

Uh oh!

Uh oh!

dopenguin commented Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Jan 23, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-07-28 13:11 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

dopenguin left a comment •

edited

Loading

dopenguin commented Aug 3, 2026 •

edited

Loading